<template>
  <div class="list-common">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-input
          v-model="search"
          placeholder="请输入检索内容"
          @keyup.enter="handleSearch"
          input-style="padding-right:30px"
        />
      </el-col>
      <el-col :span="6" class="operate-container">
        <el-button type="primary" @click="handleSearch">检索</el-button>
        <el-button type="info" @click="handleClear">清空</el-button>
        <el-button type="primary" @click="handleCreatDefine">新建</el-button>
      </el-col>
    </el-row>
    <div class="star-table-container">
      <el-table
        :data="defineList"
        :stripe="stripe"
        :max-height="listHeight"
      >
        <el-table-column prop="typeText" label="配置类型" />
        <el-table-column prop="configText" label="配置名称" />
        <el-table-column prop="systemId" label="唯一标识" />
        <el-table-column prop="useControl" label="使用控件">
          <template #default="scope">
            {{ useControlComputed(scope.row.useControl) }}
          </template>
        </el-table-column>
        <el-table-column prop="op" align="center" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" @click="handleDefineManager(scope)">操作</el-button>
            <el-popconfirm :title="showContent(scope)" width="200" @confirm="clickRemoveDefine(scope)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="star-table-pagination">
      <el-pagination
        background
        :total="listTotal"
        :layout="pageOperate"
        :default-page-size="size"
        :page-sizes="listPageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        v-model:current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
      center
      draggable
      destroy-on-close
      title="系统设置配置"
      v-model="visibleForm"
      :close-on-click-modal="false"
    >
      <setting-define-form :id="defineId" @close-dialog="closeDialog" @reload-data="loadListData"/>
    </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { getArrayText } from '@/utils/common'
import { ref, onMounted, watch, computed } from 'vue'
import { getCode } from '@/api/system/code/CodeManager'
import { stripe, size, pageOperate, listPageSizes } from '@/config/list'
import settingDefineForm from '@/views/system/setting/SettingDefineForm.vue'
import { loadDefineList, removeDefine } from '@/api/system/setting/SettingDefine'

import '@/style/list.less'

moment.locale('zh-cn')

const search = ref('')
const defineId = ref('')
const listTotal = ref(0)
const defineList = ref([])
const pageSize = ref(size)
const currentPage = ref(1)
const controlList = ref([])
const visibleForm = ref(false)

const dateFormate = computed(() => (date) => {
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
})

const useControlComputed = computed(() => (control) => {
  return getArrayText(control, controlList.value)
})

const handleSearch = () => {
  currentPage.value = 1
  loadListData()
}

const handleClear = () => {
  currentPage.value = 1
  search.value = ''
  loadListData()
}

const loadListData = () => {
  loadDefineList({
    current: currentPage.value,
    pageSize: pageSize.value,
    search: search.value
  }).then(data => {
    const { total, list } = data
    listTotal.value = total
    defineList.value = list
  })
}

const showContent = computed(() => (scope) => {
  return `是否要删除${scope.row.typeText}-${scope.row.configText}？`
})

const listHeight = computed(() => {
  return 'calc(100vh - 285px)'
})

const handleSizeChange = () => {
  loadListData()
}

const handleCurrentChange = () => {
  loadListData()
}

const handleCreatDefine = (scope) => {
  defineId.value = ''
  visibleForm.value = true
}

const handleDefineManager = (scope) => {
  defineId.value = scope.row.id
  visibleForm.value = true
}

const clickRemoveDefine = (scope) => {
  removeDefine(scope.row.id).then(() => {
    ElMessage({
      message: '删除成功！',
      type: 'success',
      duration: 800
    })
    loadListData()
  }).catch(error => {
    ElMessage.error(error.message)
  })
}

const closeDialog = () => {
  visibleForm.value = false
}

onMounted(() => {
  getCode('01GR9BVGGK61BZJZAH8KFSH2ZA').then(data => {
    controlList.value = data
  })
  loadListData()
})

</script>
